*! 绘制进度条柱形图 程振兴 2018年3月29日
*! 示例：
*! ========================================= !*
*! sysuse auto, clear
*! progressbar rep78, html(test1)
*! sysuse auto, clear
*! contract rep78
*! progressbar rep78 _freq, html(test2) sort
*! ========================================= !*
cap prog drop progressbar
prog define progressbar
	version 14.0
	syntax varlist(max = 2) [, SORT HTMLname(string)]
	cap preserve
	cap file close myfile 
	if "`htmlname'" == "" local htmlname = "fw_example"
	qui{
		local number: word count `varlist'
		if `number' == 1{
			contract `varlist'
			ren _freq num
			sum num 
			local max = r(max) * 1.2
			if "`sort'" != "" gsort num
			tostring `varlist' num, replace
			replace `varlist' = "unknown" if `varlist' == "." 
			replace num = "0" if num == "" 
			jscopy
			fw, s h(`htmlname')
			lib, b
			fw `"var category = ["'
			ren `varlist' name
			forval i = 1/`=_N'{
				local var = `"'`=name[`i']'', "'
				fw `"`var'"'
			}
			fw `"];"'
			fw `"var barData = ["'
			forval i = 1/`=_N'{
				local var = `"`=num[`i']',"'
				fw `"`var'"'
			}
			fw `"];"'
			fw `"var lineData = ["'
			forval i = 1/`=_N'{
				fw "`max',"
			}
			fw `"]"'
			fw `"console.log(barData)"'
			fw `"option = {"'
			fw `"    backgroundColor: '#000',"'
			fw `"    xAxis: {"'
			fw `"        show: false"'
			fw `"    },"'
			fw `"    yAxis: {"'
			fw `"        data: category,"'
			fw `"        show: false"'
			fw `"    },"'
			fw `"    series: [{"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'image://',"'
			fw `"        barWidth: 100,"'
			fw `"        data: lineData,"'
			fw `"        barGap: '-100%',"'
			fw `"        symbolOffset: [0, '-50%'],"'
			fw `"        barCategoryGap: 0,"'
			fw `"         // animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30;"'
			fw `"        }"'
			fw `"    }, {"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'rect',"'
			fw `"        itemStyle: {"'
			fw `"            normal: {"'
			fw `"                color: '#1F4683'"'
			fw `"            }"'
			fw `"        },"'
			fw `"        barWidth: 10,"'
			fw `"        symbolRepeat: true,"'
			fw `"        symbolSize: 14,"'
			fw `"        data: lineData,"'
			fw `"        barGap: '-100%',"'
			fw `"        barCategoryGap: 0,"'
			fw `"        label: {"'
			fw `"            normal: {"'
			fw `"                show: true,"'
			fw `"                formatter: (series) => {"'
			fw `"                    return barData[series.dataIndex]"'
			fw `"                },"'
			fw `"                position: 'insideTopRight',"'
			fw `"                offset: [0, -30],"'
			fw `"                color: '#fff',"'
			fw `"                fontSize: 20"'
			fw `"            }"'
			fw `"        },"'
			fw `"        z: -100,"'
			fw `"            animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30;"'
			fw `"        }"'
			fw `"    }, {"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'rect',"'
			fw `"        barWidth: 10,"'
			fw `"        itemStyle: {"'
			fw `"            normal: {"'
			fw `"                barBorderRadius: 5,"'
			fw `"                color: '#6DE8FA'"'
			fw `"            }"'
			fw `"        },"'
			fw `"        symbolRepeat: true,"'
			fw `"        symbolSize: 14,"'
			fw `"        data: barData,"'
			fw `"        label: {"'
			fw `"            normal: {"'
			fw `"                show: true,"'
			fw `"                formatter: '{b}',"'
			fw `"                position: [2, -30],"'
			fw `"                color: '#fff',"'
			fw `"                fontSize: 20"'
			fw `"            }"'
			fw `"        },"'
			fw `"            animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30 * 1.1;"'
			fw `"        }"'
			fw `"    }],"'
			fw `"    animation: true"'
			fw `"};"'
			fw, e t
		}
		if `number' == 2{
			jscopy
			fw, s html(`htmlname')
			lib, b 
			tokenize `varlist'
			ren `1' name
			ren `2' num
			sum num 
			local max = r(max) * 1.2
			if "`sort'" != "" gsort num
			tostring name num, replace
			replace name = "unknown" if name == "." 
			replace num = "0" if num == "" 
			fw `"var category = ["'
			forval i = 1/`=_N'{
				local var = `"'`=name[`i']'', "'
				fw `"`var'"'
			}
			fw `"];"'
			fw `"var barData = ["'
			forval i = 1/`=_N'{
				local var = `"`=num[`i']',"'
				fw `"`var'"'
			}
			fw `"];"'
			fw `"var lineData = ["'
			forval i = 1/`=_N'{
				fw "`max',"
			}
			fw `"]"'
			fw `"console.log(barData)"'
			fw `"option = {"'
			fw `"    backgroundColor: '#000',"'
			fw `"    xAxis: {"'
			fw `"        show: false"'
			fw `"    },"'
			fw `"    yAxis: {"'
			fw `"        data: category,"'
			fw `"        show: false"'
			fw `"    },"'
			fw `"    series: [{"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'image://',"'
			fw `"        barWidth: 100,"'
			fw `"        data: lineData,"'
			fw `"        barGap: '-100%',"'
			fw `"        symbolOffset: [0, '-50%'],"'
			fw `"        barCategoryGap: 0,"'
			fw `"         // animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30;"'
			fw `"        }"'
			fw `"    }, {"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'rect',"'
			fw `"        itemStyle: {"'
			fw `"            normal: {"'
			fw `"                color: '#1F4683'"'
			fw `"            }"'
			fw `"        },"'
			fw `"        barWidth: 10,"'
			fw `"        symbolRepeat: true,"'
			fw `"        symbolSize: 14,"'
			fw `"        data: lineData,"'
			fw `"        barGap: '-100%',"'
			fw `"        barCategoryGap: 0,"'
			fw `"        label: {"'
			fw `"            normal: {"'
			fw `"                show: true,"'
			fw `"                formatter: (series) => {"'
			fw `"                    return barData[series.dataIndex]"'
			fw `"                },"'
			fw `"                position: 'insideTopRight',"'
			fw `"                offset: [0, -30],"'
			fw `"                color: '#fff',"'
			fw `"                fontSize: 20"'
			fw `"            }"'
			fw `"        },"'
			fw `"        z: -100,"'
			fw `"            animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30;"'
			fw `"        }"'
			fw `"    }, {"'
			fw `"        name: '',"'
			fw `"        type: 'pictorialBar',"'
			fw `"        symbol: 'rect',"'
			fw `"        barWidth: 10,"'
			fw `"        itemStyle: {"'
			fw `"            normal: {"'
			fw `"                barBorderRadius: 5,"'
			fw `"                color: '#6DE8FA'"'
			fw `"            }"'
			fw `"        },"'
			fw `"        symbolRepeat: true,"'
			fw `"        symbolSize: 14,"'
			fw `"        data: barData,"'
			fw `"        label: {"'
			fw `"            normal: {"'
			fw `"                show: true,"'
			fw `"                formatter: '{b}',"'
			fw `"                position: [2, -30],"'
			fw `"                color: '#fff',"'
			fw `"                fontSize: 20"'
			fw `"            }"'
			fw `"        },"'
			fw `"            animationEasing: 'elasticOut',"'
			fw `"             animationDelay: function (dataIndex, params) {"'
			fw `"            return params.index * 30 * 1.1;"'
			fw `"        }"'
			fw `"    }],"'
			fw `"    animation: true"'
			fw `"};"'
			fw, e t
		}
	}
	if "`htmlname'" !="" di `"点击{browse `htmlname'.html:`htmlname'.html}即可打开结果文件"'
	if "`htmlname'" =="" di `"点击{browse fw_example.html:fw_example.html}即可打开结果文件"'
	if "`c(os)'" == "MacOSX"{
		cap qui drm __MACOSX
	}
	if "`htmlname'" !="" copen `htmlname'.html
	if "`htmlname'" =="" copen fw_example.html
end

